<!--
 * @Descripttion: 出手鸭小程序
 * @version:1.0.1 
 * @Author: HHL
 * @Date: 2023-10-11 09:12:08
 * @LastEditTime: 2025-06-18 20:43:46
 * @LastEditors: sueRimn
-->



<template>
  <popup-bottom ref="popup" title="价格说明">
    <template #default>
      <view scroll-y class="wapper-content">
        <view class="title d-flex align-items-center">价格说明
          <text class="text">最终成交价根据实际机况可能略有波动 </text>
        </view>
        <view class="item d-flex justify-content-between align-items-center">
          <text class="label">本机估价</text>
          <text class="value">￥{{ orderDetail.evaluatePrice }}</text>
        </view>
        <view class="item d-flex justify-content-between align-items-center" v-if="orderDetail.bonusPrice">
          <text class="label">加价券</text>
          <text class="value">￥{{ orderDetail.bonusPrice }}</text>
        </view>
        <view class="item d-flex justify-content-between align-items-center last">
          <text class="label"></text>
          <view class="value">
            <text class="text">合计</text>
            <text class="yuan">￥</text>
            {{ orderDetail.orderPrice }}</view>
        </view>
        <view class="wapper-attr">
          <view class="title d-flex align-items-center">您的选项
            <text class="text">您的评估选项对最终价格有影响 </text>
          </view>
          <view class="attr-warp" v-if="orderDetail.orderProduct">
            <view class="name">{{orderDetail.productName}}</view>
            <view class="item d-flex align-items-center justify-content-between" v-for="(item,index) in orderDetail.orderProduct.evaluateItem" :key="index">
            <view class="label">{{item.attrName}}</view>
            <view class="value">{{item.valueContent}}</view>
            </view>
          </view>
        </view>
      </view>
    </template>
  </popup-bottom>
</template>

<script>

export default {
  props: {
    orderDetail: { type: Object, default: { evaluatePrice: 0,orderProduct:{
      evaluateItem:[]
    } } },
  },

  methods: {
    onOpen() {
      this.$refs.popup.open()
    },

    onClose() {
      this.$refs.popup.close()
    }
  }
}
</script>

<style lang="scss" scoped>
.wapper-content {
  height: 1000rpx;
  padding: 0 30rpx;

  .title {
    height: 100rpx;
    font-size: var(--hui-font-size-30);
    color: var(--hui-color-title);

    .text {
      font-size: var(--hui-font-size-26);
      color: var(--hui-color-subtitle);
      margin: 0 0 0 20rpx;
    }
  }

  .item {
    height: 50rpx;

    .label {
      font-size: var(--hui-font-size-26);
      color: var(--hui-color-subtitle);
    }
    .value {
      font-size: var(--hui-font-size-26);
      color: var(--hui-color-title);
    }
    
  }
  .last{
      border-top: solid #efefef 1rpx;
      margin: 20rpx 0 0 0;
      padding: 20rpx 0 0 0;
      .value{
        font-size: 42rpx;
        color: #ff483c;
      }
      .text{
        font-size: var(--hui-font-size-26);
        color: var(--hui-color-title);
      }
      .yuan{
        font-size: var(--hui-font-size-26);
        color: #ff483c;
      }
    }
  .wapper-attr{
    margin: 20rpx 0 0 0;
    
    .attr-warp{
      background: #fafafa;
      border-radius: 20rpx;
      padding: 20rpx;
      font-size: var(--hui-font-size-26);
      overflow-y: scroll;
      height: 600rpx;
      .name{
        font-weight: bold;
        line-height: 60rpx;
      }
      .item{
        height: 60rpx;
      }
    }
  }
}
</style>